<template>
  <div class="wrap">
    <div class="titlts">
      <!-- <img src="../assets/list.png" alt srcset /> -->
      <p>订单标签</p>
    </div>
    <div class="searchBox">
      <el-form :inline="true">
        <el-form-item label="订单时间">
          <el-date-picker
            v-model="date2"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="标签纸格式">
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择打印内容" style="width:500px">
          <el-select
            v-model="value3"
            style="width:404px"
            multiple
            @change="getVal"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="dialogVisibleee = true">导出预览</el-button>
    </div>
    <div class="titlts">
      <!-- <img src="../assets/list.png" alt srcset /> -->
      <p>搜索订单</p>
    </div>
    <div class="searchBox">
      <el-form :inline="true">
        <el-form-item label="客户">
          <el-input v-model="customerName" placeholder="请输入客户昵称"></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="supplierName" placeholder="请输入供应商昵称"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="sendState" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="订单时间">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="getDate"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select v-model="userids" placeholder="请选择">
            <el-option
              v-for="item in usernameList"
              :key="item.user_id"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="search">查询</el-button>
    </div>

    <div class="titlts">
      <!-- <img src="../assets/list.png" alt srcset /> -->
      <p>订单管理</p>
    </div>
    <div class="order-list">
      <el-button type="danger" icon="el-icon-delete" @click="allDel">删除</el-button>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%;margin-top:30px"
        @selection-change="tavbeSelect"
        tooltip-effect="dark"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="图片" align="center">
          <template slot-scope="scope">
            <!-- <img :src="scope.row.order_image" :onerror="defaultImg2" class="tableImg" alt /> -->
            <el-image
              :src="scope.row.order_image"
              fit="cover"
              :preview-src-list="[scope.row.order_image]"
              :onerror="defaultImg2"
              class="tableImg"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="m" label="码数" align="center">
          <template slot-scope="scope">
            <el-input v-if="scope.row.editState" v-model="scope.row.order_size"></el-input>
            <p v-if="!scope.row.editState">{{scope.row.order_size}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="客户" align="center">
          <template slot-scope="scope">
            <div class="useringo">
              <p>{{scope.row.customer_name}}</p>
              <p>{{scope.row.customer_tel}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" align="center" label="价格">
          <template slot-scope="scope">
            <el-input v-if="scope.row.editState" v-model="scope.row.customer_price"></el-input>
            <p v-if="!scope.row.editState">{{scope.row.customer_price}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="供应商">
          <template slot-scope="scope">
            <div class="useringo">
              <p>{{scope.row.supplier_name}}</p>
              <p>{{scope.row.supplier_tel}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="price" align="center" label="进阶">
          <template slot-scope="scope">
            <el-input v-if="scope.row.editState" v-model="scope.row.supplier_price"></el-input>
            <p v-if="!scope.row.editState">{{scope.row.supplier_price}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="order_code" align="center" label="订单号"></el-table-column>
        <el-table-column prop="create_time" align="center" label="时间"></el-table-column>
        <el-table-column prop="name" align="center" label="状态/操作" width="200">
          <template slot-scope="scope">
            <div class="caozuo">
              <div>
                <span>{{scope.row.send_state==1?'已到货':'未到货'}}</span>
              </div>
              <div>
                <el-button type="primary" size="mini" @click="edit(scope.row)">{{scope.row.text}}</el-button>
                <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageSum" v-if="tableData.length">
        <el-pagination
          background
          layout="total,prev, pager, next"
          :page-count="pageCount"
          @current-change="currentMethods"
          :total="total"
          :page-size="pageSize"
        ></el-pagination>
      
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisibleee" width="80%" height="80vh" @close="close">
      <div slot="title">
        <p style="font-size:18px">提示:</p>
        <span  style="font-size:14px">为了您的打印不出现较大的偏差，请根据以下方式操作</span>
      </div>
      <img src="../assets/ddd.jpg" style="width:100%" alt="">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="loadPDFee">好的 我知道了</el-button>
      </span>
    </el-dialog>
    <el-dialog title="标签打印预览" :visible.sync="dialogVisible" width="80%" height="80vh" @close="close">
      <iframe :src="frame" style="height:78vh"></iframe>
     
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="loadPDF">下载</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
>>> .el-dialog {
  margin-top: 2vh !important;
}
.wrap {
  margin-top: 30px;
}
iframe {
  width: 100%;
  height: 100%;
  display: block;
}
>>> .el-dialog__body {
  min-height: 300px;
}
.titlts {
  display: flex;
  align-items: center;
  border-left: 4px solid #409eff;
  padding-left: 40px;
  p {
    color: #555;
    font-size: 14px;
    font-weight: bold;
  }
  img:nth-of-type(1) {
    display: block;
    width: 25px;
    margin-right: 40px;
  }
  img:nth-of-type(2) {
    display: block;
    width: 10px;
    margin-left: 5px;
  }
}
.searchBox {
  margin: 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .el-form {
    // width: 1280px;
    // display: flex;
    // justify-content: space-between;
    .el-form-item {
      margin-bottom: 15px;
      // .el-input,.el-select{
      //   max-width: 150px;
      // }
    }
  }
  .el-button {
    height: 40px;
    padding: 0;
    min-width: 100px;
    display: block;
  }
}

.tableImg {
  width: 60px;
  height: 60px;
  display: block;
  border-radius: 4px;
  margin: 0 auto;
}
.caozuo {
  display: flex;
  justify-content: space-around;
  height: 66px;
  .el-button {
    margin-left: 0;
  }
  div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    span {
      color: #999;
      font-size: 14px;
      display: block;
      width: 80px;
    }
  }
}
.order-list {
  margin: 30px 0;
}
.pageSum {
  display: flex;
  margin: 15px;
  justify-content: center;
}
</style>
<script>
import {
  myOrderList,
  delOrder,
  editOrder,
  listDownload,
  getCreateUserOption
} from "../utils/interface";
export default {
  data() {
    return {
      defaultImg2: 'this.src="' + require("../assets/timg.jpg") + '"',
      date: [],
      date2: [],
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "未到货"
        },
        {
          value: "1",
          label: "已到货"
        }
      ],
      options3: [
        {
          value: "customer_name",
          label: "客户昵称"
        },
        {
          value: "customer_tel",
          label: "客户手机"
        },
        {
          value: "order_size",
          label: "订单规格"
        },
        {
          value: "customer_price",
          label: "价格"
        },
        {
          value: "create_user_name",
          label: "录入人名称"
        },
        {
          value: "supplier_name",
          label: "供应商名称"
        }
      ],
      options2: [
        {
          value: "1",
          label: "A4宽47mm×高18.8mm 圆角60格（左右2m间隙）"
        },
        {
          value: "2",
          label: "A4宽48.5mmX高25.4mm 直角44枚（无间隙）"
        }
      ],
      usernameList:[],
      dialogVisibleee:false,
      value: "",
      value2: "1",
      value3: [],
      tableData: [],
      delArr: null, // 多选状态 记录
      currentPage: 1,
      pageSize: 20,
      pageCount: 0,
      customerName: "",
      supplierName: "",
      sendState: "",
      startDate: "",
      endDate: "",
      frame: "",
      dialogVisible: false,
      resDataPDF: "",
      customer_name: 0,
      customer_tel: 0,
      order_size: 0,
      customer_price: 0,
      create_user_name: 0,
      supplier_name: 0,
      total: 0,
      userids:"",
      
    };
  },
  methods: {
    loadPDFee(){
      this.dialogVisibleee = false
      this.exportas()
    },
    exportas() {
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      console.log( this.customer_name,
        this.customer_tel,
        this.order_size,
        this.customer_price,
        this.create_user_name,
        this.supplier_name,)
      listDownload({
        startDate: this.date2[0],
        endDate: this.date2[1],
        sendState: "",
        customer_name: this.customer_name,
        customer_tel: this.customer_tel,
        order_size: this.order_size,
        customer_price: this.customer_price,
        create_user_name: this.create_user_name,
        supplier_name: this.supplier_name,
        type:this.value2
      }).then(res => {
         console.log(this.value3)
        this.value3 = []
        console.log(this.value3)
        
         
        loading.close();
        this.resDataPDF = res.data;
        this.dialogVisible = true;
        this.frame =
          "./static/pdf/web/viewer.html?file=" +
          window.URL.createObjectURL(res.data);
      });
    },
    close() {
      this.dialogVisible = false;
    },
    getVal(e) {
      console.log(this.value3)
      let arr = [];
      arr = e
      if (this.value3.length) {
        this.customer_name=0
        this.customer_tel=0
        this.order_size=0
        this.customer_price=0
        this.create_user_name=0
        this.supplier_name=0
        this.value3.map(item => {
          if (item == "customer_name") {
            this.customer_name = 1;
          }
          if (item == "customer_tel") {
            this.customer_tel = 1;
          }
          if (item == "order_size") {
            this.order_size = 1;
          }
          if (item == "customer_price") {
            this.customer_price = 1;
          }
          if (item == "create_user_name") {
            this.create_user_name = 1;
          }
          if (item == "supplier_name") {
            this.supplier_name = 1;
          }
        });
      }
      console.log(arr);
    },
    loadPDF() {
      var link = document.createElement("a");
      link.href = window.URL.createObjectURL(this.resDataPDF);
      link.download = "订单.pdf";
      link.click();
      window.URL.revokeObjectURL(link.href);
      this.dialogVisible = false;
    },
    getOrderList(customerName, supplierName, sendState, startDate, endDate,create_name) {
      myOrderList({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        customerName,
        supplierName,
        sendState,
        startDate,
        endDate,
        create_name
      }).then(res => {
        res.data.data.list.map(item => {
          item.editState = false;
          item.text = "修改";
        });
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        this.pageCount = Math.ceil(res.data.data.total / this.pageSize);
      });
    },
    // 翻页
    currentMethods(e) {
      this.currentPage = e;
      this.getOrderList();
    },
    // 删除订单
    del(row) {
      this.$confirm("您将删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delOrder([row.order_id]).then(res => {
            this.getOrderList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 修改订单
    edit(row) {
      console.log(JSON.stringify(row));
      if (row.editState) {
        let data = {
          orderImage: row.order_image,
          orderSize: row.order_size,
          customerName: row.customer_name,
          customerTel: row.customer_tel,
          customerPrice: row.customer_price,
          supplierName: row.supplier_name,
          supplierTel: row.supplier_tel,
          supplierPrice: row.supplier_price,
          orderId: row.order_id
        };
        editOrder(data).then(res => {
          this.getOrderList();
          this.$message({
            type: "success",
            message: "修改成功!"
          });
          row.editState = false;
          row.text = "修改";
        });
      } else {
        row.editState = true;
        row.text = "保存";
      }
    },
    tavbeSelect(e) {
      if (e.length) {
        this.delArr = [];
        e.map(item => {
          this.delArr.push(item.order_id);
        });
      }
    },
    // 多条删除
    allDel() {
      if (!this.delArr) {
        this.$alert("请至少选择一条订单", "提示", {
          confirmButtonText: "确定"
        });
        return false;
      }
      console.log(this.delArr);
      this.$confirm(`您将删除${this.delArr.length}条订单, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delOrder(this.delArr).then(res => {
            if (res.data.code == 200) {
              this.getOrderList();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 获取搜索的时间
    getDate(e) {
      console.log(e);
      this.startDate = e[0];
      this.endDate = e[1];
    },
    // 搜索订单
    search() {
      this.currentPage = 1;
       this.userids = this.userids=='全部'?"": this.userids
      this.getOrderList(
        this.customerName,
        this.supplierName,
        this.sendState,
        this.startDate,
        this.endDate,
        this.userids
      );
    },
    // 获取录入人
    getLuru() {
      getCreateUserOption().then(res => {
        if(res.data.data.length){
          this.usernameList = res.data.data
        }
        this.usernameList.unshift({username:"全部",user_id:0})
        console.log(res.data, "录入人");
      });
    },
    indexMethod(index) {
      console.log(index);
      return this.total - index;
    }
  },
  mounted() {
    this.getOrderList();
    this.getLuru();
  }
};
</script>